<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box" id="mydiv">我是div</div>
    <div>222</div>
    <ul>
        <li>111</li>
        <li>22</li>
        <li>33</li>
    </ul>
    <script>
        // 获取dom元素
        // 1.通过id名称获取
        // var ele = document.getElementById("mydiv");
        // console.log(ele);
        // ele.style.color = "red";

        // 2.直接通过id 获取元素
        // console.log(mydiv);
        // console.log(a)
        // var a = 10;

        // 3.通过类名获取元素
        // var eles  = document.getElementsByClassName("box");
        // console.log(eles);

        // 4.通过标签名称获取元素

        // var eles = document.getElementsByTagName("div");
        // // console.log(eles);
        // var res = eles[0];
        // console.log(typeof res);
        // {name:"张三",age:20}
        // console.log(res);
        // console.dir(res);
        // res.test = "hello";
        // console.dir(res);
        // console.log(res.test);


        // 5.通过 css选择器获取元素querySelector
        // querySelector只能获取一个元素
        // var ele = document.querySelector(".box");
        // var ele = document.querySelector("#mydiv");
        // console.log(ele);
        // var ele = document.querySelector("div");
        // console.log(ele);

        // 6.通过css选择器获取元素 querySelectorAll() 获取到的是数组
        // var eles = document.querySelectorAll(".box");
        // 从document里获取 div 是一个获取范围 
        // var eles = document.querySelectorAll("div");
        // // console.log(eles);
        // eles.forEach(function(ele){
        //     ele.style.color = "red";
        // })


        // 在document里获取ul元素
        // var ulele = document.querySelector("ul");
        // // 在ul里获取li元素
        // var lis = ulele.querySelectorAll("li");
        // console.log(lis);

        // 小思考 ：按钮 点击之后 显示或者隐藏一个div
        // var flag = true;
        // document.onclick = function(){
        //     flag = !flag;
        //     console.log(flag);
        // }




    </script>
</body>
</html>